<template>
	<view class="card-pack">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#4786fe" :activeStyle="{
					color: '#000000'
				}" :inactiveStyle="{
					color: '#353535'
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>
		<!-- 场馆环境 -->
		<view class="list" v-if="currentTab == 0">
			<!-- <view class="" style="width: 230rpx;height: 250rpx;float: left;margin-left: 6rpx;"
				v-for="(item, index) in environment" :key="index">
				<image style="width: 225rpx;height: 225rpx;" :src="item" mode="" @tap.stop="previewImg($event,item)"
					:data-src="items"></image>
			</view> -->
				<u-album  :urls="environment" :rowCount="3" :multipleSize='120' ></u-album>
		</view>
		<!-- 场馆资质 -->
		<view class="list" v-if="currentTab == 1">
			<!-- <view class="" style="width: 230rpx;height: 250rpx;float: left;margin-left: 6rpx;"
				v-for="(item, index) in list.certification" :key="index">
				<image style="width: 225rpx;height: 225rpx;" :src="item" mode=""  @tap.stop="preImg($event,item)"
					:data-src="items"></image>
			</view> -->
			<u-album  :urls="certification" :rowCount="3" :multipleSize='120' ></u-album>
		</view>
		<!-- 人员证书 -->
		<view class="list" v-if="currentTab == 2">
			<!-- <view class="" style="width: 230rpx;height: 250rpx;float: left;margin-left: 6rpx;"
				v-for="(item, index) in list.personnel_cert" :key="index">
				<image style="width: 225rpx;height: 225rpx;" :src="item" mode=""  @tap.stop="viewImg($event,item)"
					:data-src="items"></image>
			</view> -->
			<u-album  :urls="personnel_cert" :rowCount="3" :multipleSize='120' ></u-album>
		</view>

		<!-- <u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" /> -->
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				currentTab: 0,
				tabsList: [{
						name: '场馆环境'
					},
					{
						name: '场馆资质'
					},
					{
						name: '人员证书'
					},
				],
				list: [],
				personnel_cert:[],
				certification:[],
				listQuery: { //分页
					limit: 5,
					page: 1,
				},
				totalPage: "",
				environment:[]
			}
		},
		onLoad(options) {
			this.currentTab = options.type
			this.getVenusDetail()
		},
		methods: {
			// 图片放大
			previewImg(e, item) {
				let src = item;
				uni.previewImage({
					urls: this.environment,
					longPressActions: {
						// itemList: ['发送给朋友', '保存图片', '收藏'],
						// success: function(data) {
						// 	console.log(data,'12')
						// 	console.log('1278')
						// 	console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						// },
						// fail: function(err) {
						// 	console.log(789789)
						// 	console.log(err.errMsg);
						// }
					}
				});
				// if (src.indexOf("https:") != -1) {
				// 	src = item;
				// } else {
				// 	src = "https:" + item;
				// }
				// let imgList = [src]; //获取data-list
				// imgList &&
				// 	imgList.map((item, index) => {
				// 		imgList[index] = src.indexOf("https:") != -1 ? item : "https:" + item;
				// 	});
				// uni.previewImage({
				// 	current: src,
				// 	// 当前显示图片的http链接
				// 	urls: imgList.length > 1 ? imgList : [src], // 需要预览的图片http链接列表
				// });
			},
			// 图片放大
			preImg(e, item) {
				let src = item;
				uni.previewImage({
					urls: this.list.certification,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 图片放大
			viewImg(e, item) {
				let src = item;
				uni.previewImage({
					urls: this.list.personnel_cert,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 获取场馆主页
			async getVenusDetail() {
				let params = {
					projectId: getApp().globalData.projectId,
					weixinAppId: this.$https.weixinAppId,
					venues_id: uni.getStorageSync('venues_id')
				}
				let res = await venues.getVenusDetail(params)
				if (res.code === 1) {
					this.list = res.data.data
					this.personnel_cert = res.data.data.personnel_cert
					this.certification = res.data.data.certification
					this.environment = res.data.data.environment.split('|')
				}
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				this.list = []
				this.getVenusDetail()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card-pack {
		padding-bottom: env(safe-area-inset-bottom);

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #E5E5E5;
			margin: 0 30rpx;

			.u-tabs__wrapper__nav__item {
				// flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.list {
			padding: 20rpx;
			
			/deep/ .u-album__row__wrapper{
				width: 30%;
				margin-right: 0 !important;
				overflow: hidden;
				border-radius: 10rpx;
				margin-left: 14rpx;
				&:last-of-type{
					width: auto;
				}
			}
		}
	}
</style>